<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--企业数据-->
      <el-col :span="4" :xs="24">
        <div class="head-container">
          <el-input v-model="deptName" placeholder="请输入名称" clearable size="small" prefix-icon="el-icon-search"
            style="margin-bottom: 20px" />
        </div>
        <div class="head-containers">
          <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false"
            :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current
            @node-click="handleNodeClick" />
        </div>
      </el-col>
      <!--小区数据-->

      <el-col :span="20" :xs="24">
        <el-card class="box-card">
          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
            label-width="68px">
            <el-form-item label="客户类型" prop="customerType">
              <el-select v-model="queryParams.customerType" filterable placeholder="请选择">
                <el-option v-for="dict in dict.type.customer_type" :key="dict.value" :label="dict.label"
                  :value="dict.value" />
              </el-select>

            </el-form-item>
            <el-form-item label="客户名称" prop="customerName">
              <el-input v-model="queryParams.customerName" placeholder="请输入客户名称" clearable style="width: 150px" />
            </el-form-item>
            <el-form-item label="身份证号" prop="idNumber">
              <el-input v-model="queryParams.idNumber" placeholder="请输入身份证号" clearable style="width: 150px" />
            </el-form-item>
            <el-form-item label="客户编码" prop="customerCode">
              <el-input v-model="queryParams.customerCode" placeholder="请输入客户编码" clearable style="width: 150px" />
            </el-form-item>
            <el-form-item label="表号" prop="meterCode">
              <el-input v-model="queryParams.meterCode" placeholder="请输入表号" clearable style="width: 150px" />
            </el-form-item>
            <el-form-item label="开户时间" prop="openDate">
              <el-date-picker type="date" placeholder="选择开户时间" v-model="queryParams.openDate" style="width: 150px;"
                value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
            </el-form-item>
            <el-form-item label="手机号" prop="telephone">
              <el-input v-model="queryParams.telephone" placeholder="请输入手机号" clearable style="width: 150px" />
            </el-form-item>
            <el-form-item label="计价方案" prop="priceSchemeId">
              <el-select v-model="queryParams.priceSchemeId" filterable placeholder="请选择">
                <el-option :label="item.schemeName" :value="item.id" v-for="(item, index) in schemeList" :key="index">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="小区名称" prop="areaName">
              <el-input v-model="queryParams.areaName" placeholder="请输入小区名称" clearable style="width: 150px" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>

          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
                v-hasPermi="['fileManagement:civilArchivesQuery:export']">导出</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
          </el-row>

          <el-table v-loading="loading" :data="userList" border @selection-change="handleSelectionChange"
            @row-click="rowClick">
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column label="客户名称" align="center" key="customerName" prop="customerName"
              :show-overflow-tooltip="true" />
            <el-table-column label="客户类型" align="center" key="customerType" prop="customerType"
              :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.customer_type" :value="scope.row.customerType" />
              </template>
            </el-table-column>
            <el-table-column label="计价方案" align="center" key="priceSchemeName" prop="priceSchemeName"
                             :show-overflow-tooltip="true" />

            <el-table-column label="客户编码" align="center" key="customerCode" prop="customerCode"
              :show-overflow-tooltip="true" />
            <el-table-column label="小区" align="center" key="areaName" prop="areaName"
                             :show-overflow-tooltip="true" />
            <el-table-column label="表号" align="center" key="meterCode" prop="meterCode" :show-overflow-tooltip="true"
              width="120" />
            <el-table-column label="总购气金额" align="center" key="totalAmout" prop="totalAmout" :show-overflow-tooltip="true"
              width="120" />
            <el-table-column label="余额" align="center" key="remainAmout" prop="remainAmout" :show-overflow-tooltip="true"
              width="100" />

            <el-table-column label="总用气量" align="center" key="totalVolume" prop="totalVolume"
              :show-overflow-tooltip="true" width="100" />
            <el-table-column label="剩余气量" align="center" key="remainVolume" prop="remainVolume"
              :show-overflow-tooltip="true" width="100" />
            <el-table-column label="是否黑名单" align="center" key="isBlack" prop="isBlack" :show-overflow-tooltip="true"
              width="100">
              <template slot-scope="scope">
                <span v-if="scope.row.isBlack == 'N'">否</span>
                <span v-if="scope.row.isBlack == 'Y'">是</span>
              </template>
            </el-table-column>
            <el-table-column label="计费周期开始时间" align="center" key="cycleStartTime" prop="cycleStartTime"
              :show-overflow-tooltip="true" width="150" />
            <el-table-column label="计费周期结束时间" align="center" key="cycleEndTime" prop="cycleEndTime"
              :show-overflow-tooltip="true" width="150" />
            <el-table-column label="周期内总用气量" align="center" key="cycleUseGas" prop="cycleUseGas"
              :show-overflow-tooltip="true" width="150" />
            <el-table-column label="周期内总使用金额" align="center" key="cycleUseAmount" prop="cycleUseAmount"
              :show-overflow-tooltip="true" width="150" />
            <el-table-column label="充值次数" align="center" key="payCount" prop="payCount" :show-overflow-tooltip="true" />
            <el-table-column label="片区ID" align="center" key="areaId" prop="areaId" :show-overflow-tooltip="true" />
            <el-table-column label="楼栋号" align="center" key="building" prop="building" :show-overflow-tooltip="true" />
            <el-table-column label="单元号" align="center" key="unit" prop="unit" :show-overflow-tooltip="true"
              width="100" />
            <el-table-column label="楼层号" align="center" key="floor" prop="floor" :show-overflow-tooltip="true" />
            <el-table-column label="门牌号" align="center" key="houseNo" prop="houseNo" :show-overflow-tooltip="true" />
            <el-table-column label="客户地址" align="center" key="customerAddress" prop="customerAddress"
              :show-overflow-tooltip="true" />
            <el-table-column label="证件号" align="center" key="idNumber" prop="idNumber" :show-overflow-tooltip="true"
              width="100" />
            <el-table-column label="联系电话" align="center" key="telephone" prop="telephone" :show-overflow-tooltip="true" />
            <el-table-column label="开户日期" align="center" key="openDate" prop="openDate" :show-overflow-tooltip="true"
              width="120" />
            <el-table-column label="自动发送短信" align="center" key="isAutoSendmsg" prop="isAutoSendmsg"
              :show-overflow-tooltip="true" width="120">
              <template slot-scope="scope">
                <span v-if="scope.row.isAutoSendmsg == 'N'">否</span>
                <span v-if="scope.row.isAutoSendmsg == 'Y'">是</span>
              </template>
            </el-table-column>

            <!-- <el-table-column label="是否给客户发送短信" align="center" key="isSendMsg" prop="isSendMsg"
              :show-overflow-tooltip="true" width="150">
              <template slot-scope="scope">
                <span v-if="scope.row.isSendMsg == 'N'">否</span>
                <span v-if="scope.row.isSendMsg == 'Y'">是</span>
              </template>
            </el-table-column> -->
            <el-table-column label="是否欠费关阀" align="center" key="isCloseOverdue" prop="isCloseOverdue"
              :show-overflow-tooltip="true" width="120">
              <template slot-scope="scope">
                <span v-if="scope.row.isCloseOverdue == 'N'">否</span>
                <span v-if="scope.row.isCloseOverdue == 'Y'">是</span>
              </template>
            </el-table-column>
            <el-table-column label="是否缴费开阀" align="center" key="isOpenPaid" prop="isOpenPaid"
              :show-overflow-tooltip="true" width="100">
              <template slot-scope="scope">
                <span v-if="scope.row.isOpenPaid == 'N'">否</span>
                <span v-if="scope.row.isOpenPaid == 'Y'">是</span>
              </template>
            </el-table-column>
            <el-table-column label="短信提醒号码" align="center" key="messagePhone" prop="messagePhone"
              :show-overflow-tooltip="true" width="120" />

            <!-- <el-table-column label="充值次数" align="center" key="payCount" prop="payCount" :show-overflow-tooltip="true" /> -->

            <el-table-column label="账单日" align="center" key="billDay" prop="billDay" :show-overflow-tooltip="true" />

            <el-table-column label="备注" align="center" key="remark" prop="remark" :show-overflow-tooltip="true" />

          </el-table>

          <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />
        </el-card>
        <el-card class="box-card" style="margin-top: 10px">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="账户详情" name="1">
              <table border class="tablex">
                <tbody>

                  <!-- <tr>
                    <td class="lables">片区ID</td>
                    <td>{{ userInfo.areaId }}</td>
                    <td class="lables">客户卡号</td>
                    <td>{{ userInfo.cardNumber }}</td>
                  </tr> -->
                  <tr>
                    <td class="lables">客户名称</td>
                    <td>{{ userInfo.customerName }}</td>
                    <td class="lables">客户类型</td>
                    <td v-if="userInfo.customerType == 'INDUSTRAIL'">工业</td>
                    <td v-if="userInfo.customerType == 'BUSINESS'">商用</td>
                    <td v-if="userInfo.customerType == 'CIVIL'">民用</td>
                  </tr>
                  <!-- <tr>
                    <td class="lables">小区ID</td>
                    <td>{{ userInfo.communityId }}</td>
                    <td class="lables">楼栋号</td>
                    <td>{{ userInfo.building }}</td>
                  </tr> -->
                  <tr>
                    <td class="lables">单元号</td>
                    <td>{{ userInfo.updateById }}</td>
                    <td class="lables">楼层号</td>
                    <td>{{ userInfo.floor }}</td>
                  </tr>
                  <tr>
                    <td class="lables">门牌号</td>
                    <td>{{ userInfo.houseNo }}</td>
                    <td class="lables">客户地址</td>
                    <td>{{ userInfo.customerAddress }}</td>
                  </tr>
                  <!-- <tr>
                    <td class="lables">企业ID</td>
                    <td>{{ userInfo.entId }}</td>
                    <td class="lables">证件号</td>
                    <td>{{ userInfo.idNumber }}</td>

                  </tr> -->

                  <tr>
                    <td class="lables">开户日期</td>
                    <td>{{ userInfo.openDate }}</td>
                    <td class="lables">联系电话</td>
                    <td>{{ userInfo.telephone }}</td>
                  </tr>

                  <tr>
                    <td class="lables">备注</td>
                    <td>{{ userInfo.remark }}</td>
                    <td class="lables">余额提醒阈值</td>
                    <td>{{ userInfo.nickName }}</td>
                  </tr>
                  <tr>
                    <td class="lables">自动发送短信</td>
                    <td v-if="userInfo.isAutoSendmsg == 'Y'">是</td>
                    <td v-if="userInfo.isAutoSendmsg == 'N'">否</td>
                    <td v-if="userInfo.isAutoSendmsg == ''"></td>
                    <td class="lables">是否加入黑名单</td>
                    <td v-if="userInfo.isBlack == 'Y'">是</td>
                    <td v-if="userInfo.isBlack == 'N'">否</td>
                    <td v-if="userInfo.isBlack == ''"></td>
                  </tr>
                  <tr>
                    <td class="lables">是否欠费关阀</td>
                    <td v-if="userInfo.isCloseOverdue == 'Y'">是</td>
                    <td v-if="userInfo.isCloseOverdue == 'N'">否</td>
                    <td v-if="userInfo.isCloseOverdue == ''"></td>
                    <td class="lables">是否缴费开阀</td>
                    <td v-if="userInfo.isOpenPaid == 'Y'">是</td>
                    <td v-if="userInfo.isOpenPaid == 'N'">否</td>
                    <td v-if="userInfo.isBlack == ''"></td>
                  </tr>
                  <tr>
                    <td class="lables">是否发送短信</td>
                    <td v-if="userInfo.isSendMsg == 'Y'">是</td>
                    <td v-if="userInfo.isSendMsg == 'N'">否</td>
                    <td v-if="userInfo.isSendMsg == ''"></td>
                    <td class="lables">短信提醒号码</td>
                    <td>{{ userInfo.messagePhone }}</td>
                  </tr>
                  <tr>
                    <td class="lables">收费月份</td>
                    <td>{{ userInfo.nickName }}</td>
                    <td class="lables">账单日</td>
                    <td>{{ userInfo.billDay }}</td>
                  </tr>
                  <tr>
                    <td class="lables">累计购气金额</td>
                    <td>{{ userInfo.totalAmout }}</td>
                    <td class="lables">累计用气量</td>
                    <td>{{ userInfo.totalVolume }}</td>
                  </tr>
                  <tr>
                    <!-- <td class="lables">充值次数</td>
                    <td>{{ userInfo.payCount }}</td> -->
                    <td class="lables">剩余购气金额</td>
                    <td>{{ userInfo.remainAmout }}</td>
                  </tr>
                  <tr>
                    <td class="lables">累计用气量</td>
                    <td>{{ userInfo.remainVolume }}</td>
                  </tr>
                </tbody>
              </table>
            </el-tab-pane>
            <el-tab-pane label="表记信息展示" name="2">
              <el-table :data="tableData" border style="width: 100%">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="表号" align="center" width="150" prop="meterCode" />
                <el-table-column label="安装状态" align="center" prop="meterStatus" width="120">
                  <template slot-scope="scope">
                    <span v-if="scope.row.meterStatus == 1">待安装</span>
                    <span v-if="scope.row.meterStatus == 2">正常</span>
                    <span v-if="scope.row.meterStatus == 3">已拆卸</span>
                  </template>

                </el-table-column>
                <el-table-column label="激活状态" align="center" prop="activeStatus" width="120">
                  <template slot-scope="scope">
                    <span v-if="scope.row.activeStatus == 'N'">未激活</span>
                    <span v-if="scope.row.activeStatus == 'Y'">已激活</span>
                  </template>

                </el-table-column>
                <el-table-column label="阀门状态" align="center" prop="valveStatus" width="120">
                  <template slot-scope="scope">
                    <span v-if="scope.row.valveStatus == 0">关闭</span>
                    <span v-if="scope.row.valveStatus == 1">开启</span>
                    <span v-if="scope.row.valveStatus == 2">未知</span>
                  </template>

                </el-table-column>
                <el-table-column label="基表厂家" align="center" prop="supplierName" />
                <el-table-column label="客户类型" align="center" prop="typeName" />

                <el-table-column label="总用气量" align="center" prop="totalUseVolume" />
                <el-table-column label="总用气金额" align="center" prop="totalUseAmout" width="120" />
                <el-table-column label="表端总额" align="center" prop="totalPurchaseAmout" />

                <el-table-column label="气表进气方向" align="center" prop="intakeDirection" width="150">
                  <template slot-scope="scope">
                    <span v-if="scope.row.intakeDirection == 'L'">左进</span>
                    <span v-if="scope.row.intakeDirection == 'R'">右进</span>
                  </template>
                </el-table-column>

                <el-table-column label="DTU编号" align="center" prop="dtuCode" />
                <!-- <el-table-column label="设备ID" align="center" prop="deviceId" /> -->
                <el-table-column label="流量计厂家" align="center" prop="flowmeterManufacturer" width="120" />
                <el-table-column label="基表底数" align="center" prop="baseNumber" />
                <el-table-column label="报警额度" align="center" prop="alarmGas" />
                <el-table-column label="基表iccid" align="center" prop="iccid" />
                <el-table-column label="IMEI" align="center" prop="imei" />
                <el-table-column label="流量计起始量" align="center" prop="initialGas" width="150" />
                <el-table-column label="安装日期" align="center" prop="installTime" width="170" />

                <el-table-column label="是否带流量计" align="center" prop="isFlowmeter" width="120">
                  <template slot-scope="scope">
                    <span v-if="scope.row.isFlowmeter == 'N'">否</span>
                    <span v-if="scope.row.isFlowmeter == 'Y'">是</span>
                  </template>
                </el-table-column>
                <el-table-column label="是否带GPRS" align="center" prop="isGprs" width="120">
                  <template slot-scope="scope">
                    <span v-if="scope.row.isGprs == 'N'">否</span>
                    <span v-if="scope.row.isGprs == 'Y'">是</span>
                  </template>

                </el-table-column>


                <el-table-column label="通讯地址" align="center" prop="mailAddress" />
                <el-table-column label="通讯协议" align="center" prop="mailProtocol" />
                <!-- <el-table-column label="基表手机号" align="center" prop="meterPhoneNum" width="120" /> -->
                <el-table-column label="工程工料费" align="center" prop="projectFee" width="120" />
                <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
              </el-table>
            </el-tab-pane>

            <el-tab-pane label="交易记录" name="4">
              <el-form :model="queryParams1" ref="queryForm1" size="small" :inline="true" v-show="showSearch"
                label-width="68px">
                <el-form-item label="交易方式" prop="tradeType">
                  <el-select v-model="queryParams1.tradeType" filterable placeholder="请选择">
                    <el-option label="全部" value=""> </el-option>
                    <el-option label="现金支付" value="1"> </el-option>
                    <el-option label="扫码支付" value="2"> </el-option>
                    <el-option label="结余转存" value="3"> </el-option>
                    <el-option label="退费" value="4"> </el-option>
                    <el-option label="冲正" value="5"> </el-option>
                    <el-option label="在线缴费" value="6"> </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" icon="el-icon-search" size="mini" @click="serach">查询</el-button>
                </el-form-item>
              </el-form>
              <el-table :data="tableData3" border style="width: 100%">
                <el-table-column prop="tradeType" label="交易方式" align="center">
                  <template slot-scope="scope">
                    <span v-if="scope.row.tradeType == '1'">现金支付</span>
                    <span v-if="scope.row.tradeType == '2'">扫码支付</span>
                    <span v-if="scope.row.tradeType == '3'">结余转存</span>
                    <span v-if="scope.row.tradeType == '4'">退费</span>
                    <span v-if="scope.row.tradeType == '5'">冲正</span>
                    <span v-if="scope.row.tradeType == '6'">在线缴费</span>
                  </template>
                </el-table-column>
                <el-table-column prop="paidAmount" label="交易金额(元)" align="center">
                </el-table-column>
                <el-table-column prop="balanceAmount" label="账户余额(元)" align="center">
                </el-table-column>
                <el-table-column prop="gasVolumn" label="用量合计(m³)" align="center"></el-table-column>
                <el-table-column prop="beforeAmount" label="缴费前余额" align="center">
                </el-table-column>
                <el-table-column prop="gasType" label="客户类型" align="center">
                  <template slot-scope="scope">
                    <dict-tag :options="dict.type.customer_type" :value="scope.row.gasType" />
                  </template>
                </el-table-column>
                <el-table-column prop="buyType" label="购买类型" align="center">
                  <template slot-scope="scope">
                    <span v-if="scope.row.buyType == '1'">按气量购买</span>
                    <span v-if="scope.row.buyType == '2'">按金额购买</span>
                  </template>
                </el-table-column>
                <el-table-column prop="orderStatus" label="交易状态" align="center">
                  <template slot-scope="scope">
                    <span v-if="scope.row.orderStatus == 0">失败</span>
                    <span v-if="scope.row.orderStatus == 1">成功</span>
                    <span v-if="scope.row.orderStatus == 2">撤销</span>
                  </template>
                </el-table-column>
                <el-table-column prop="type" label="购气类型" align="center">
                  <template slot-scope="scope">
                    <span v-if="scope.row.type == '1'">开户</span>
                    <span v-if="scope.row.type == '2'">购气</span>
                    <span v-if="scope.row.type == '3'">补卡</span>
                  </template>
                </el-table-column>
                <el-table-column prop="payTime" label="交易时间" align="center" width="160"></el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="用气量流水统计" name="5">
              <el-table :data="userList2" border>
                <el-table-column type="selection" width="50" align="center" />
                <el-table-column label="用气金额(元)" align="center" key="useAmount" prop="useAmount"
                  :show-overflow-tooltip="true" width="100" />
                <el-table-column label="用气量" align="center" key="useGas" prop="useGas" :show-overflow-tooltip="true"
                  width="150" />
                <el-table-column label="客户名称" align="center" key="customerName" prop="customerName"
                  :show-overflow-tooltip="true" />
                <el-table-column label="客户编码" align="center" key="customerCode" prop="customerCode"
                  :show-overflow-tooltip="true" />
                <el-table-column label="客户类型" align="center" key="customerType" prop="customerType"
                  :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <span v-if="scope.row.customerType == 'INDUSTRAIL'">工业</span>
                    <span v-if="scope.row.customerType == 'BUSINESS'">商用</span>
                    <span v-if="scope.row.customerType == 'CIVIL'">民用</span>
                  </template>
                </el-table-column>

                <el-table-column label="证件号" align="center" key="idNumber" prop="idNumber" :show-overflow-tooltip="true"
                  width="100" />
                <el-table-column label="采集日期" align="center" key="createTime" prop="createTime"
                  :show-overflow-tooltip="true" />
                <el-table-column label="联系电话" align="center" key="telephone" prop="telephone"
                  :show-overflow-tooltip="true" />
                <el-table-column label="表号" align="center" key="meterCode" prop="meterCode" :show-overflow-tooltip="true"
                  width="120" />
                <el-table-column label="表运行状态" align="center" key="totalVolume" prop="totalVolume"
                  :show-overflow-tooltip="true" width="120" />
                <el-table-column label="片区名称" align="center" key="areaName" prop="areaName" :show-overflow-tooltip="true"
                  width="150" />
                <el-table-column label="阀门状态" align="center" key="valveStatus" prop="valveStatus"
                  :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <span v-if="scope.row.customerType == '0'">关闭</span>
                    <span v-if="scope.row.customerType == '1'">开启</span>
                    <span v-if="scope.row.customerType == '2'">未知</span>
                  </template>
                </el-table-column><el-table-column label="表计状态" align="center" key="meterStatus" prop="meterStatus"
                  :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <span v-if="scope.row.customerType == '1'">待安装</span>
                    <span v-if="scope.row.customerType == '2'">正常</span>
                    <span v-if="scope.row.customerType == '3'">已拆卸</span>
                  </template>
                </el-table-column>
              </el-table>
              <pagination v-show="total2 > 0" :total="total2" :page.sync="queryParams2.pageNum"
                :limit.sync="queryParams2.pageSize" @pagination="getList2({ 'customerId': userId })" />
            </el-tab-pane>


          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { customeList, customeInfo, addCustome, updateArea, delCustome, exportCustome } from "@/api/fileManagement/civilArchives.js"
import { meterarchivesList, meterarchivesInfoMap } from "@/api/fileManagement/meterarchives.js"
import { payRemakInfo, payRemakList } from "@/api/service/online.js"
import { useGasList, useGasListAll } from "@/api/report/useGas.js"
import { areaTreeList } from "@/api/fileManagement/areainfo.js"
import { planSelectList } from '@/api/service/planlist'

export default {
  name: "CivilArchivesQuery",
  components: {},
  dicts: ["customer_type"],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      total2: 0,
      // 小区表格数据
      userList: null,
      userList2: null,
      // 弹出层标题
      title: "",
      //表计弹出层标题
      title2: "",
      // 企业树选项
      deptOptions: null,
      // 企业名称
      deptName: null,
      // 表单参数
      form: {},
      defaultProps: {
        children: "children",
        label: "label",
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        customerType: null,
        customerName: null,
        idNumber: null,
        deptId: null,
        openDate: null,
        telephone: null,
        meterCode: null,
        customerCode: null,
        priceSchemeId: null,
        areaName:null
      },
      queryParams1: {
        pageNum: 1,
        pageSize: 10,
        tradeType: null,
        payTime: null,
      },
      queryParams2: {
        pageNum: 1,
        pageSize: 10,
      },
      // 表单校验
      rules: {
        userName: [
          { required: true, message: "小区名称不能为空", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "小区名称长度必须介于 2 和 20 之间",
            trigger: "blur",
          },
        ],
        nickName: [
          { required: true, message: "小区昵称不能为空", trigger: "blur" },
        ],
      },
      activeName: "1",
      tableData: [],
      tableData2: [{}],
      tableData3: [],
      tableData4: [{}],
      tableData5: [{}],
      tableData6: [{}],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value2: "",
      radio: 1,
      value3: "",
      userInfo: {
        areaId: '',
        billDay: '',
        building: '',
        cardNumber: '',
        communityId: '',
        createById: '',
        customerName: '',
        customerType: '',
        idNumber: '',
        entId: '',
        floor: '',
        houseNo: '',
        isAutoSendmsg: '',
        isBlack: '',
        isCloseOverdue: '',
        isOpenPaid: '',
        isSendMsg: '',
        messagePhone: '',
        payCount: '',
        remainAmout: '',
        remainVolume: '',
        remark: '',
        stationId: '',
        telephone: '',
        totalAmout: '',
        totalVolume: '',
        unit: '',
        updateById: '',
        customerAddress: '',
        userId: '',
        schemeList: [],
      },
      meterId: '',
      headList: [
        // {
        //     name: '片区',
        //     value: '',
        //     url: require('../../assets/icons/are.png')
        // },
        {
          name: '合计用气金额(元)',
          value: '0',
          url: require('../../assets/icons/shishou.png')
        },
        {
          name: '合计用气量(m3)',
          value: '0',
          url: require('../../assets/icons/yongqi.png')
        },
      ],
      userId: '',
    };
  },
  watch: {
    // 根据名称筛选企业树
    deptName(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {
    this.getList();
    this.getDeptTree();
    this.getPricingPlanList()
  },
  methods: {
    // 查询计价方案
    getPricingPlanList() {
      planSelectList().then((res) => {
        this.schemeList = res
      })
    },

    getList2(info) {
      useGasList({ ...this.queryParams2, ...info }).then((response) => {
        this.userList2 = response.rows;
        this.total2 = response.total;
      });
    },
    // 统计获取
    getAll(info) {
      useGasListAll({ ...this.queryParams2, ...info }).then((item) => {
        this.headList.map((res) => {
          if (res.name == '合计用气金额(元)') {
            res.value = item.data.useAmount
          } else if (res.name == '合计用气量(m3)') {
            res.value = item.data.useGas
          }
        })
      })
    },
    handleSelectionChange() { },
    // 表格某一行被点击
    rowClick(row) {
      console.log(row)
      this.userId = row.id
      this.meterId = row.meterId
      this.getCustomInfo(row.id)
      this.getMeterInfo(row.meterId)
      this.grtPayRemakInfo()
      this.getList2({ customerId: row.id })
      // this.getAll({ customerId: row.id })

    },
    // 交易记录查询
    serach() {
      this.grtPayRemakInfo()
    },
    // 账户详情
    getCustomInfo(id) {
      customeInfo(id).then((res) => {
        console.log(res)
        this.userInfo = {}
        this.userInfo = res.data
      })
    },
    // 表计信息展示
    getMeterInfo(id) {
      this.tableData = []
      meterarchivesInfoMap(id).then((res) => {
        console.log(res)
        if (res.data) {
          this.tableData.push(res.data)
        }
        // this.tableData = res.rows
      })
    },
    // 交易记录
    grtPayRemakInfo() {
      let para = {
        customerId: this.userId, ...this.queryParams1
      }
      payRemakList(para).then((res) => {
        this.tableData3 = []
        this.tableData3 = res.rows
        console.log(res)
      })
    },
    // tab切换
    handleClick(tab, event) {
      console.log(tab.index, event.innerText);
      if (tab.index == '0') {

        this.getCustomInfo(this.userId)
      } else if (tab.index == '1') {
        if (this.meterId) {
          this.getMeterInfo(this.meterId)
        } else {
          this.$message.error("请先选择客户");
        }

      } else if (tab.index == '2') {
        if (this.userId) {
          this.grtPayRemakInfo()
        } else {
          this.$message.error("请先选择客户");
        }

      } else if (tab.index == '3') {
        if (this.userId) {
          this.getList2({ customerId: this.userId })
        } else {
          this.$message.error("请先选择客户");
        }

        // this.getAll({ customerId: this.userId })
      }
    },
    /** 查询小区列表 */
    getList() {
      this.loading = true;
      let search = this.queryParams;
      search.params = typeof (search.params) === 'object' && search.params !== null && !Array.isArray(search.params) ? search.params : {};
      search.params['meterCode'] = search.meterCode;
      customeList(this.queryParams).then((response) => {
        this.userList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 查询企业下拉树结构 */
    getDeptTree() {
      areaTreeList().then((response) => {
        this.deptOptions = response.data;
      });
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.areaId = data.id;
      this.handleQuery();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.areaId = null;
      this.$refs.tree.setCurrentKey(null);
      this.handleQuery();
    },
    /** 搜索按钮操作 */
    handleQuery3() {
      this.queryParams2.pageNum = 1;
      this.getList2({ customerId: this.userId })
      // this.getAll({ customerId: this.userId })
    },
    /** 重置按钮操作 */
    resetQuery3() {
      this.resetForm("queryForm2");
      this.$refs.tree.setCurrentKey(null);
      this.handleQuery3();
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "system/customerarchives/export",
        {
          ...this.queryParams,
        },
        `user_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.head-containers {
  width: 200px;
  overflow: auto;

  .el-tree {
    min-width: 100%;
    display: inline-block !important;
  }
}


.tablex {
  width: 100%;
  border-collapse: collapse;
  border-color: #ebeef5;

  td {
    width: 25%;
    padding: 10px;
    color: #606266;
    font-size: 14px;
  }

  .lables {
    background: rgba(150, 154, 184, 0.05);
    text-align: right;
  }
}

.head_box {
  width: 100%;
  height: 60px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;

  .head_box_value {
    width: 30%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 10px;

    .head_box_img {
      display: inline-block;
      width: 25px;
      height: 25px;
      margin-right: 15px;
    }
  }
}
</style>
